<template>
  <div>
    <ul v-if="listData.length>0" class="list">
      <li v-for="(item, index) in listData" :key="index">
        <h3>
          <p>
            <span v-show="isTranslate[index] === 'false'" v-html="item.title" @click="toDetail(item)"></span>
            <span v-show="isTranslate[index] === 'true'" v-html="item.transT" @click="toDetail(item)"></span>
            <!-- <router-link
              v-show="isTranslate[index] === 'false'"
              :to="{
                name:
                  $route.name === 'evalPartentList'
                    ? 'evalPatentDetail'
                    : 'patentDetail',
                query: {
                  pn: item.pn,
                  active: 1,
                  name: $route.query.name,
                  eid: $route.query.eid,
                },
              }"
              tag="span"
              v-html="item.title"
            ></router-link> -->
            <!-- <router-link
              v-show="isTranslate[index] === 'true'"
              :to="{
                name:
                  $route.name === 'evalPartentList'
                    ? 'evalPatentDetail'
                    : 'patentDetail',
                query: {
                  pn: item.pn,
                  active: 1,
                  name: $route.query.name,
                  eid: $route.query.eid,
                },
              }"
              tag="span"
              >{{ item.transT }}</router-link
            > -->
            <i class="translation" @click="translation(item, index)">译</i>
          </p>
          <span class="score high">价值评分：
            <template v-if="item.pantentScore&&item.pantentScore>0">
              {{ item.pantentScore }}分
            </template>
            <template v-else>-</template>
          </span>
          <!-- <i v-if="item.pantentScore >= 30" class="high"
            >价值评分：{{ item.pantentScore }}分</i
          >
          <i
            v-if="item.pantentScore < 30 && item.pantentScore > 0"
            class="low"
            >价值评分：{{ item.pantentScore }}分</i
          > -->
        </h3>
        <p class="clearfix">
          <span class="light"
            ><a style="width: 50px; color: #95959f">申请号：</a
            ><a class="fontColor">{{ item.apn }}</a></span
          >
          <span>申请日：{{ item.ad }}</span>
          <span class="light"
            ><a style="width: 50px; color: #95959f">申请人：</a
            ><a class="fontColor" style="width: 80%">{{
              item.an.toString()
            }}</a></span
          >
          <span>IPC：{{ item.ipcm }}</span>
        </p>
        <p class="clearfix">
          <span
            >专利类型：<i>{{ item.patent_type }}</i></span
          >
          <span>公开日：{{ item.isd }}</span>
          <span class="light"
            ><a style="width: 50px; color: #95959f">发明人：</a
            ><a class="fontColor">{{ item.inventor.toString() }}</a></span
          >
          <span v-if="item.legal_status !== ''"
            >法律状态：{{ item.legal_status }}</span
          >
        </p>
      </li>
    </ul>
    <div v-else class="no-data">
      <loading1 :emptyText="emptyText"/>
    </div>
  </div>
</template>

<script>
import {xmlEscape} from '@/utils/utils'
export default {
  props: {
    emptyText: {
      type: String
    }
  },
  data() {
    return {
      isTranslate: [],
      listData: [],
    }
  },
  methods: {
    init(result) {
      this.isTranslate = []
      result.forEach(v => {
        v.title = xmlEscape(v.title)
        this.isTranslate.push("false");
      })

      this.listData = result
      for (let i = 0; i < this.listData.length; i++) {
        let p = this.listData[i].pn;
        let ths = this;
        this.getPantentScoreCount(p, function (data) {
          ths.$set(ths.listData[i], "pantentScore", data.data ? data.data : "0")
        });
      }
    },
    // 价值评分
    getPantentScoreCount(p, fn) {
      this.$get(this.$Url.patent.pantentScoreCount, {
        pn: p,
      })
        .then((data) => fn(data))
        .catch((err) => {
          console.log(err);
        });
    },
    // 翻译
    translation(item, index) {
      let transT = this.listData[index].transT || "";
      if (transT !== "") {
        if (this.isTranslate[index] === "false") {
          this.$set(this.isTranslate, index, "true");
        } else {
          this.$set(this.isTranslate, index, "false");
        }
      } else if (transT === "") {
        let pro1 = this.translateFn(item.title);
        pro1.then((res) => {
          this.$set(this.listData[index], "transT", res);
          this.$set(this.isTranslate, index, "true");
        });
      }
    },
    translateFn(text) {
      let promise = new Promise((resolve, reject) => {
        this.$post(this.$Url.patent.translat, {
          text: text,
        })
          .then((data) => {
            let text = data.data.translation[0].translated[0].text || "";
            resolve(text);
          })
          .catch((err) => {
            reject(err);
          });
      });
      return promise;
    },
    toDetail(item) {
      this.$router.push({
        name: 'TechnicalValuationDetail',
        query: {
          pn: item.pn,
          active: 1
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>

.list {
  padding: 10px 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 10px 0 20px;
  list-style: none;
  background-color: $color2;
  li {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e7e6ec;
    > p {
      width: 100%;
      margin-bottom: 8px;
      > span {
        float: left;
        display: block;
        margin-right: 1%;
        font-size: 12px;
        color: #95959f;
        &:nth-child(1) {
          width: 20%;
        }
        &:nth-child(2) {
          width: 16%;
        }
        &:nth-child(3) {
          width: 30%;
        }
        &:nth-child(4) {
          width: 120px;
        }
        > a {
          line-height: 20px;
          display: block;
          float: left;
        }
        .fontColor {
          color: #514caa;
        }
        i {
          font-style: normal;
        }
      }
    }
  }
  h3 {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 16px;
    color: #241c75;
    > p {
      position: relative;
      margin-right: 130px;
      color: #51505e;
      > span {
        vertical-align: middle;
        cursor: pointer;
      }
    }
    .score {
      position: absolute;
      top: 0;
      right: 0;
      padding: 4px 14px;
      border-radius: 4px;
      text-align: center;
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      color: #fff;
    }
  }
  .translation {
    padding: 2px 7px;
    margin-left: 10px;
    border: 1px solid #4f63c8;
    border-radius: 3px;
    vertical-align: middle;
    font-style: normal;
    font-size: 12px;
    color: $mainColor;
    background-color: #fff;
    cursor: pointer;
    &:hover {
      border-color: #241c75;
      color: #fff;
      background-color: #241c75;
    }
  }
}
.low {
  background-color: #c44b5c;
}
.high {
  background-color: #34ae9b !important;
}
.light {
  color: $mainColor !important;
}
.abstract {
  line-height: 26px;
  margin-top: 8px;
  font-size: 14px;
  word-wrap: break-word;
  word-break: break-all;
  color: #7674a3;
}
.align-center {
  text-align: center;
}
.pagination {
  text-align: center;
  padding-bottom: 20px;
}
.no-patent-tip {
  width: 100%;
  line-height: 1rem;
  padding: .1rem 0;
  font-size: .18rem;
  text-align: center;
  color: $color104;
}
.no-data {
  line-height: 1.5rem;
  padding: 10px 20px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 10px 0 20px;
  list-style: none;
  background-color: $color2;
}
</style>